﻿@page "/TextArea"

@using FluentUI.Demo.Shared.Pages.TextArea.Examples

<PageTitle>@App.PageTitle("TextArea")</PageTitle>

<h1>Text area</h1>

<p>An implementation of an <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea" target="_blank" rel="noopener noreferrer">HTML textarea element</a>. The <code>&lt;FluentTextArea&gt;</code> supports two visual appearances, outline and filled, with the control defaulting to the outline appearance.</p>

<p>
    <code>&lt;FluentArea&gt;</code> wraps the <code>&lt;fluent-text-area&gt;</code> element, a web component implementation of a text area composition leveraging the
    Fluent UI design system.
</p>

<h2 id="example">Examples</h2>

<DemoSection Title="Default" Component="@typeof(TextAreaDefault)"></DemoSection>

<DemoSection Title="Rows and Cols" Component="@typeof(TextAreaRowsAndCols)"></DemoSection>

<DemoSection Title="Displays" Component="@typeof(TextAreaDisplays)"></DemoSection>

<DemoSection Title="States" Component="@typeof(TextAreaStates)"></DemoSection>

<DemoSection Title="Resize" Component="@typeof(TextAreaResizing)"></DemoSection>

<DemoSection Title="Focus" Component="@typeof(TextAreaFocus)"></DemoSection>

<DemoSection Title="Filled Appearance" Component="@typeof(TextAreaFilled)"></DemoSection>

<h2 id="documentation">Documentation</h2>

<ApiDocumentation Component="typeof(FluentTextArea)" GenericLabel="string?" />
